<!-- src/components/charts/AdBarChart.vue -->
<template>
  <el-card class="box-card" shadow="hover" style="height: 600px">
    <template #header>
      <div class="card-header">📈 客户广告数量统计</div>
    </template>
    <div ref="chartRef" style="height: 400px; width: 100%"></div>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getAdStatistics } from '@/api/statistics'

const chartRef = ref(null)

const fetchChartData = async () => {
  try {
    const res = await getAdStatistics()
    const data = res.data.filter(item => item.adCount > 0)

    const clientNames = data.map(item => item.clientName)
    const adCounts = data.map(item => item.adCount)

    const chart = echarts.init(chartRef.value)

    const option = {
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          const name = params.name
          const value = params.value
          return `${name}<br/>广告数量：${value}条`
        }
      },
      grid: {
        left: '5%',
        right: '5%',
        bottom: '8%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: clientNames,
        axisLabel: {
          fontWeight: 600,
          color: '#555',
          rotate: 20
        }
      },
      yAxis: {
        type: 'value',
        name: '广告数量',
        axisLabel: {
          color: '#777'
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#eee'
          }
        }
      },
      series: [
        {
          name: '广告数量',
          type: 'bar',
          data: adCounts,
          barWidth: '40%',
          itemStyle: {
            borderRadius: 6,
            color: (params) => {
              const colors = [
                ['#42a5f5', '#478ed1'],
                ['#66bb6a', '#43a047'],
                ['#ffb74d', '#f57c00'],
                ['#ef5350', '#e53935'],
                ['#ab47bc', '#8e24aa']
              ]
              const color = colors[params.dataIndex % colors.length]
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: color[0] },
                { offset: 1, color: color[1] }
              ])
            }
          }
        },
        {
          name: '广告数量',
          type: 'line',
          data: adCounts,
          smooth: true,
          lineStyle: {
            width: 2,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#42a5f5' },
              { offset: 1, color: '#478ed1' }
            ]),
            shadowColor: 'rgba(66, 165, 245, 0.4)',
            shadowBlur: 10
          },
          itemStyle: {
            color: '#42a5f5',
            borderColor: '#fff',
            borderWidth: 2
          },
          symbol: 'circle',
          symbolSize: 10,
          emphasis: {
            focus: 'series',
            scale: true,
            label: {
              show: false
            }
          },
          animationDelay: idx => idx * 80
        }
      ]
    }

    chart.setOption(option)
    window.addEventListener('resize', () => chart.resize())
  } catch (error) {
    console.error('获取客户广告统计失败：', error)
  }
}

onMounted(() => {
  fetchChartData()
})
</script>

<style scoped>
.card-header {
  font-weight: bold;
  font-size: 18px;
  color: #409EFF;
}
</style>
